<template>
	<view>
		<view id="navbar">
			<u-navbar title="分类" :autoBack="true" :placeholder="true"></u-navbar>
		</view>

		<view style="padding: 0 20rpx;" :style="{'padding-top':topHeadHeight+ 'rpx' }" class="flbox">
			<view v-for="(item,index) in cats" :key="index" v-if="item.id !=76 ">
				<view class="t">{{item.name}}</view>
				<uni-collapse>
					<uni-collapse-item v-for="i in item.two_cate" v-if="item.two_cate.lenght !== 0" :key="i.id">
						<template v-slot:title>
							<view class="class-box">
								<view class="left">
									<img :src="i.image" alt="">
								</view>
								<view class="right">
									<view style="color:rgb(250, 140, 22) ;font-size: 26rpx;">
										{{i.flage?i.flage:''}}
									</view>
									<view class="item-title">
										{{i.name}}
									</view>
									<view style="font-size: 26rpx;color:#333333b8 ;">
										{{i.discribe?i.discribe:''}}
									</view>

								</view>
							</view>
						</template>
						<view class="list" v-if="i.three_cate.lenght !== 0">
							<view class="box">
								<view class="h">{{i.three_cate[0].name}}</view>
								<view class="items" style="padding-bottom:20rpx">
									<view class="item" v-for="k in i.three_cate[0].threegoods" :key="k.id">

										<view class="img" @click="goto1(k.id)">
											<img style="width: 200rpx;height: 200rpx;display: block;margin: 0 auto;" :src="k.thum_image"
												alt="">
										</view>
										<view class="text">
											{{k.name}}
										</view>
									</view>
								</view>
							</view>

						</view>
					</uni-collapse-item>
				</uni-collapse>
				<!-- 查看全部 -->
				<view class="list-bottom" @click="to1">
					查看全部{{item.name}}
					<!-- <image src="/static/images/index/right_jt.png" mode=""
						style="width: 20rpx;height: 20rpx;filter:invert(1);margin-left: 6rpx;"> -->
				</view>
			</view>
		</view>


		<!-- 底部广告位 -->
		<view class="yhq" v-for="(item,index) in imgList" :key="item.id" v-if="item.id!=11">
			<view class="yhq-box" style="border-radius:10rpx;background:none;">
				<img :src="item.image" alt="">
				<!-- <view class="yhq-text" mode="aspectFit">
					<view>{{item.title}}</view>
				</view> -->
				<view class="yhq-btn" @click="to(item.id)">点击了解</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				cats: [],
				number: null,
				statusHeight: 94,
				topHeadHeight: 172,
			}
		},
		components: {},
		async onLoad() {
			let carNumber = await this.$api.getCartList({})

			let number = 0
			carNumber.data.forEach(v => {

				number += v.num
			})
			this.number = number
			let res = await this.$api.getartcle({})
			let res1 = await this.$api.getcategory({})
			// let res2 = await this.$api.getcategoods({
			// 	cate_id: 62
			// })
			this.cats = res1.data
			this.imgList = res.data

			// console.log(uni.getSystemSetting().statusBarHeight * 2);

			this.statusHeight = uni.getSystemSetting().statusBarHeight * 2;

			this.topHeadHeight = uni.getStorageSync('headHeight') * 2;


		},
		async onShow() {
			let carNumber = await this.$api.getCartList({})

			let number = 0
			carNumber.data.forEach(v => {

				number += v.num
			})
			this.number = number
		},
		methods: {
			toUrl(item) {
				uni.navigateTo({
					url: item
				})
			},
			to1() {
				uni.navigateTo({
					url: '/subPages/ranking/ranking'
				})
			},
			async getList(id) {

				// console.log(v);
				let res = await this.$api.getcategoods({
					cate_id: id
				})
				// console.log(res);
				// return [3, 3, 3, 3]
				return res.data

			},
			goto1(id) {

				uni.navigateTo({
					url: '/subPages/goodDetails/goodDetails?id=' + id
				})
			},
			to(url) {

				uni.navigateTo({
					url: '/subPages/clasSingle/clasSingle?id=' + url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fl-title {
		line-height: 80rpx;
	}

	.flbox {
		position: relative;
		background-color: white;
	}


	.nav {
		font-size: 32rpx;
		margin-bottom: 40rpx;
		position: relative;
		display: flex;
	}

	.cart {
		margin-left: 20rpx;
		position: relative;

		.number {
			position: absolute;
			width: 24rpx;
			height: 24rpx;
			line-height: 24rpx;
			border-radius: 50%;
			left: 70%;
			text-align: center;
			background-color: red;
			font-size: 16rpx;
			color: #fff;
		}
	}


	.class-box {
		display: flex;
		align-items: center;
		padding: 30rpx;

		.left {
			img {
				width: 130rpx;
				height: 130rpx;
			}
		}

		.right {
			margin-left: 20rpx;
			line-height: 38rpx;
		}
	}

	.list-bottom {
		background-color: rgb(243, 246, 251);
		text-align: center;
		line-height: 90rpx;
		font-size: 22rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: -8rpx;
		color: #333;
		font-size: 24rpx;
		font-weight: 700;
	}

	.list {
		padding-bottom: 20rpx;

		.box {
			.bottom-text {
				font-size: 22rpx;
				font-weight: 700;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
			}

			.h {
				margin-top: 20rpx;
				font-weight: 700;
				padding-left: 6rpx;
				margin-bottom: 20rpx;
			}

			.items {
				display: flex;
				overflow: scroll;

				.item {
					width: 280rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
					background: #e7e8ea47;
					padding-bottom: 20rpx;

					.img {
						padding: 15rpx;
					}

					.text {
						padding: 0 10rpx;
						font-size: 22rpx;
						text-align: center;
					}

				}
			}
		}
	}

	.t {
		margin-top: 20rpx;
		color: #888;
		font-size: 30rpx;
		line-height: 50rpx;
	}

	page {
		background-color: #fff;
	}

	.item-title {
		font-weight: 700;
		font-size: 30rpx;
		line-height: 50rpx;
	}
</style>